<template>
  <section>
    <el-form label-width="100px">
      <el-form-item label="姓名：">
        <el-select v-model="currLearner.customerId"  :filterable="true" remote :reserve-keyword="false" size="mini" allow-create
                   default-first-option  placeholder="请输入姓名" :remote-method="remoteMethod" value-key="id">
          <el-option v-for="(user,index) in customerList" :key="index" :label="user.name" :value="user.id" v-if="customerList">
            <span style="float: left">{{ user.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ user.phone }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注：">
        <el-input v-model="currLearner.data.ps" size="mini" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="success" @click="confirmBtn">{{currLearner.id?'保存':'新建'}}</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "newLearner",
    props:['currLearner'],
    data() {
      return {
        lecturerList:null,
        customerList:null
      }
    },
    created(){
      console.log(this.currLearner)
      if(this.currLearner.data.ps === undefined){
        Vue.set(this.currLearner.data,'ps','')
      }
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch:{},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      remoteMethod(keywords) {
        clearTimeout()
        setTimeout(()=>{
          this.fetch({name:"getUserList",data:{keywords}})
            .then(res=>{
              console.log(res)
              this.customerList=res.content
            })
            .catch(err=>{
              console.log(err)
              errHandler.handle(this,err)
            })},1000)
      },
      confirmBtn(){
        console.log(this.currLearner)
        //customerId
        this.$emit('confirm',this.currLearner)
      }
    }
  }
</script>

<style scoped>

</style>
